! function($) {
    let telFlag = false;
    let telFlag1 = false;
    let passwordFlag = false;
    let repassFlag = false;
    let checkboxFlag = false;
    $('.submit')[0].disabled = true;




    // 登录注册切换
    const btns = $('#bigBox .tab_title li');
    const contents = $('#bigBox .tab_content .item');
    btns.on('click', function() {
        // $('input').val('');
        $(this).addClass('active').siblings('li').removeClass('active');
        contents.eq($(this).index('li')).addClass('show').siblings('.item').removeClass('show');
    });




    // 手机账号得到焦点时
    $('.tel').on('focus input', function() {
        // 清除历史内容
        $(this).attr('autocomplete', 'off');

        // $('label').eq(1).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': 'red' });

        // 得到焦点时在没内容的情况下
        if ($(this).val() === '') {
            // 下方的提示文字出现，颜色变为#aaaaaa  
            $('.checkspan').eq(0).css({ 'color': '#aaaaaa', 'font-size': '12px' }).html('请输入手机号码');
            // 框内文字样式改变上移加缩小并固定，颜色不变#bababa
            $('label').eq(3).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bababa' });

        } else { //有内容的情况下,得到焦点时
            // 背景颜色为白色
            $(this).css({ 'background': '#fff' });

            $('.checkspan').eq(0).css('color', '#f04645').html('');

            $('label').eq(3).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#f04645' });
        }
    });


    // 手机账号失去焦点时
    $('.tel').on('blur input', function() {

        // 在有内容的情况下
        if ($(this).val() !== '') {

            let reg = /^1[3578]\d{9}$/;
            if (reg.test($(this).val())) {

                // $('.checkspan').eq(0).css('color', 'green').html('');
                $(this).css({ 'background': '#f9f9f9', 'color': '' });
                $('label').eq(3).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bababa' });

                $.ajax({ //$.ajax:jquery下面ajax的方法
                    method: 'post',
                    url: 'http://localhost/JS2112/xiaomi/php/reg.php',
                    data: {
                        tel: $('.tel').val() //val:相当于原生js里面表单的value
                    }
                }).then(function(d) {
                    if (d === 'false') { //true 有 false没有
                        $('.checkspan').eq(0).html('').css('color', 'green');
                        telFlag = true;
                    } else { //不存在
                        $('.checkspan').eq(0).html('该用户名已存在').css('color', 'red');
                        telFlag = false;
                    }
                    check();
                });

            } else {
                // $('.submit').on('click', function() {
                $('.checkspan').eq(0).css({ 'color': 'red' }).html(''); //手机号格式不正确
                $('.tel').eq(0).css({ 'background': '#fcf2f3' });
                // })
                telFlag = false;
            }
            telFlag1 = true;
        } else { //失去焦点后没有内容时
            // 下方的提示文字出现，颜色变为#f04645
            $('.checkspan').eq(0).css('color', '#f04645').html('请输入手机号码');
            // 框内文字样式回复正常，但是颜色变红#f04645
            $('label').eq(3).css({ 'top': '20px', 'font-size': '16px', 'color': '#f04645', 'transition': 'all,0.2s' });
            // 框内的背景颜色变为#fcf2f3
            $(this).css({ 'background': '#fcf2f3' });
            // 开关 = 错
            telFlag1 = false;
            telFlag = false;
        }
        check();
        console.log(telFlag, passwordFlag, repassFlag, checkboxFlag);
    });


    // 密码框得到焦点时的判定
    $('.password').on('focus input', function() {
        // 清除历史内容
        $(this).attr('autocomplete', 'off');

        // 得到焦点时在没内容的情况下
        if ($(this).val() === '') {
            // 下方的提示文字出现，颜色变为#aaaaaa 
            $('.checkspan').eq(1).css({ 'color': '#aaaaaa', 'font-size': '12px' }).html('密码长度8~16位,数字、字母、字符至少包含两种');
            // 框内文字样式改变上移加缩小并固定，颜色不变#bababa
            $('label').eq(4).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bebebe' });

        } else { //有内容的情况下,得到焦点时
            // 背景颜色为白色
            $(this).css({ 'background': '#fff' });

            // 下方的提示文字出现，颜色变为#f04645
            // $('.checkspan').eq(1).css('color', '#f04645').html('密码长度8~16位,数字、字母、字符至少包含两种');
            // 框内文字样式改变上移加缩小并固定，颜色不变#bababa
            $('label').eq(4).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#f04645' });
        }
    });

    // 密码框内的内容发生改变时的判定
    $('.password').on('input', function() {

        //必须包含大小写字母、数字以及特殊字符，且长度在8到16位之间
        var reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_.,/;:!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^.,/;:&*`~()-+=]+$)(?![0-9\\W_!@#.,/;:$%^&*`~()-+=]+$)(?![a-zA-Z0-9]+$)(?![a-zA-Z\\W_!@#$%.,/;:^&*`~()-+=]+$)(?![a-z0-9\\W_!@#$%.,/;:^&*`~()-+=]+$)(?![0-9A-Z\\W_!@#.,/;:$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$.,/;:%^&*`~()-+=]{8,16}$/;

        //强密码为八位及以上并且大小写字母数字特殊字符三项都包括
        // let reg1 = /^(?=.{8,16})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$/g;
        let reg1 = /((^(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,16}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,16}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z_\W]{8,16}$))/

        //中密码为八位及以上并且大小写字母、数字、特殊字符三项中有两项，强度是中等
        let reg2 = /^(?=.{8,16})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\W))|((?=.*[0-9])(?=.*\W))|((?=.*[A-Z])(?=.*\W))).*$/g;

        //弱密码为八位及单一的大小写字母、数字、特殊字符
        let reg3 = /(?=.{8,16}).*/g;


        if (reg.test($(this).val())) {
            $('.checkspan').eq(1).css('color', 'green').html('密码安全等级:强 ');
            passwordFlag = true;
        } else if (reg1.test($(this).val())) {
            $('.checkspan').eq(1).css('color', 'orange').html('密码安全等级:中 ');
            passwordFlag = true;
        } else if (reg2.test($(this).val())) {
            $('.checkspan').eq(1).css('color', 'red').html('密码安全等级:低 ');
            passwordFlag = true;

        } else if (reg3.test($(this).val())) {
            $('.checkspan').eq(1).css('color', 'red').html('密码长度8~16位,数字、字母、字符至少包含两种 ');
            passwordFlag = false;
        }
        check();
        console.log(telFlag, passwordFlag + '1', repassFlag, checkboxFlag);
    });

    // 密码框在失去焦点时的判定
    $('.password').on('blur input', function() {

        // 在密码框有内容的情况下
        if ($(this).val() !== '') {

            if ($(this).val().length >= 8 && $(this).val().length < 16 && passwordFlag) {
                $('.checkspan').eq(2).css({ 'color': 'green', 'font-size': '12px' }).html('密码长度:√');
                $('.checkspan').eq(3).css({ 'color': 'green', 'font-size': '12px' }).html('密码可使用:√');
                $('label').eq(4).css({ 'top': '3px', 'font-size': '12px', 'color': '#bababa', 'transition': 'all,0.2s' });

                $(this).css({ 'background': '#f9f9f9' });

            } else {
                $(this).css({ 'background': '#fcf2f3' });

                $('.checkspan').eq(1).css('color', 'red').html('密码长度8~16位,数字、字母、字符至少包含两种 ');
                $('.checkspan').eq(2).css({ 'color': 'green', 'font-size': '12px' }).html('');
                $('.checkspan').eq(3).css({ 'color': 'green', 'font-size': '12px' }).html('');

                passwordFlag = false;
            }
        } else { // 在密码框没有内容时
            // 提示文字出现， 颜色为#f04645
            $('.checkspan').eq(1).css('color', '#f04645').html('密码长度8~16位,数字、字母、字符至少包含两种 ');
            // 框内文字样式回复正常，但是颜色变红#f04645
            $('label').eq(4).css({ 'top': '20px', 'font-size': '16px', 'color': '#f04645', 'transition': 'all,0.2s' });
            // 框内的背景颜色变为#fcf2f3
            $(this).css({ 'background': '#fcf2f3' });
            passwordFlag = false;
        }
        check();
        console.log(telFlag, passwordFlag + '2', repassFlag, checkboxFlag);
    });



    // 再次确认密码
    $('.repass').on('focus input', function() {

        // 在密码的内容为空和不通过时
        if ($('.password').val() !== '' && passwordFlag) {

            // 确认密码的内容为空时，判断确认密码

            if ($('.repass').val() === '') {
                $('label').eq(5).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bebebe' })
                    // $('.checkspan').eq(4).css({ 'color': '#f04645', 'font-size': '12px' }).html('两次输入密码需保持一致')
                repassFlag = false;

            } else { //确认密码有内容有内容时，判断确认密码

                $(this).css({ 'background': '' });
                // $('.checkspan').eq(4).css({ 'color': '#595959', 'font-size': '12px' }).html('')
                $('label').eq(5).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bebebe' })
                repassFlag = false;
            }

        } else { //在密码的内容为正确时
            $('label').eq(5).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bebebe' })
            $('.checkspan').eq(4).css({ 'color': '#595959', 'font-size': '12px' }).html('两次输入密码需保持一致')
            $('.repass').css({ 'background': '#f9f9f9' });
            repassFlag = false;
        }
    });


    $('.repass').on('blur input', function() {

        // 在密码的内容不通过时
        if ($('.password').val() !== '' && passwordFlag) {

            if ($('.repass').val() !== '') {

                $(this).css({ 'background': '#fcf2f3' });
                $('label').eq(5).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bebebe' })
                $('.checkspan').eq(4).css({ 'color': '#f04645', 'font-size': '12px' }).html('密码输入不一致')

                if ($('.repass').val() == $('.password').val()) {

                    $(this).css({ 'background': '#f9f9f9' });
                    $('label').eq(5).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bebebe' })
                    $('.checkspan').eq(4).css({ 'color': '#595959', 'font-size': '12px' }).html('')
                    repassFlag = true;
                }

            } else {

                if ($('.password').val() !== '' && passwordFlag) {

                    $('label').eq(5).css({ 'top': '20px', 'font-size': '16px', 'transition': 'all,0.2s', 'color': '#f04645' })

                    $('.repass').css({ 'background': '#fcf2f3' });
                    repassFlag = false;
                } else {
                    $('label').eq(5).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#f04645' })
                        // $(this).css({ 'background': '' });
                    $('.repass').css({ 'background': '#fcf2f3' });

                    $('.checkspan').eq(4).css({ 'color': '#f04645', 'font-size': '12px' }).html('请输入确认密码');
                    repassFlag = false;
                }
                repassFlag = false;
            }

        } else {
            if ($('.repass').val() !== '') {
                $('label').eq(5).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', 'color': '#bebebe' })
                repassFlag = false;
            } else {
                $('label').eq(5).css({ 'top': '20px', 'font-size': '16px', 'transition': 'all,0.2s', 'color': '#bebebe' })
                repassFlag = false;
            }
            $('.checkspan').eq(4).css({ 'color': '#595959', 'font-size': '12px' }).html('')
            repassFlag = false;
        }
        check();
        console.log(telFlag, passwordFlag, repassFlag, checkboxFlag);
    });



    // 条款同意选项
    $('.input_item').on('click', function() {
        if ($('.input_item').eq(0).prop('checked') === true) {

            // $('.checkspan2').eq(0).clearQueue().hide();

            checkboxFlag = true;
        } else {
            checkboxFlag = false;
        }
        console.log(telFlag, passwordFlag, repassFlag, checkboxFlag);
    });


    $('.form_registry').on('submit', function() {

        if ($('.input_item').eq(0).prop('checked') === false) {
            let timer = null;

            $('.checkspan2').eq(0).clearQueue().show();

            timer = setInterval(() => {
                clearInterval(timer);
                $('.checkspan2').eq(0).clearQueue().hide();
                console.log(1);
            }, 2000);
            checkboxFlag = false;
        }

        if (!passwordFlag) {
            $('.checkspan').eq(3).css({ 'color': 'red', 'font-size': '12px' }).html('请确认密码');
            $('.password').css({ 'background': '#fcf2f3' });
        }

        if (!repassFlag) {
            $('.checkspan').eq(4).css({ 'color': 'red', 'font-size': '12px' }).html('两次输入密码需保持一致')
            $('.repass').css({ 'background': '#fcf2f3' });
        }

        let reg = /^1[3578]\d{9}$/;

        if (!telFlag) {
            console.log(false);
            $('.checkspan').eq(0).css({ 'color': 'red' }).html('手机号格式不正确');
            $('.tel').css({ 'background': '#fcf2f3' });
            $('label').eq(3).css({ 'top': '3px', 'font-size': '12px', 'transition': 'all,0.2s', "color": '#f04645' });
            telFlag = false;
        } else if (reg.test($(this).val())) {
            telFlag = true;
        }


        if (!telFlag || !passwordFlag || !repassFlag || !checkboxFlag) {
            return false;
        }
        // check();
    });


    function check() {
        if (telFlag || telFlag1 && passwordFlag && repassFlag) {

            $('.submit')[0].disabled = false;
            $('.submit').css({ 'background': '#ff5c00' });

        } else {

            $('.submit')[0].disabled = true;
            $('.submit').css({ 'background': '#ffbe99' });

        }
    }


    $('.submit').on('hover', function() {
        if (telFlag && passwordFlag && repassFlag) {
            $('.submit').style({ 'background': '#ff7e29' });
        }
    }, function() {
        if (telFlag && passwordFlag && repassFlag) {
            $('.submit').style({ 'background': '#ff5c00' });
        }
    })

}(jQuery);